<template>
  <el-table v-bind="$attrs" v-loading="pageLoading" :data="list">
    <slot></slot>
  </el-table>
  <el-pagination v-bind="pagination" :total="total" :current-page="pageNum" @current-change="handlePageChange" />
</template>

<script>
import useFetchList from '@/hooks/fetchList'
export default {
  name: 'app-table',
  components: {},
  props: {
    fetchFn: {
      type: Function,
      required: true
    },
    pagination: {
      type: Object,
      default: function () {
        return {
          background: true,
          layout: 'prev, pager, next'
        }
      }
    }
  },
  setup(props, context) {
    const {
      list,
      pageLoading,
      total,
      pageNum,
      //
      fetchListTable
    } = useFetchList((params) => {
      return props.fetchFn(params)
    })

    const handlePageChange = (val) => {
      pageNum.value = val
      console.log('page change', val)
      if (val) fetchListTable()
    }

    return {
      list,
      pageLoading,
      total,
      pageNum,
      //
      fetchListTable,
      handlePageChange
    }
  }
}
</script>

<style lang="scss"></style>
